<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            .rolling{
                width:800px;
                height: 130px;
                border:10px solid #ccc;
                margin:100px auto;
                position: relative;
                overflow: hidden;
            }
            .m_unit{
                /*这是运动的单位
                这个宽度足以致命，为了让所有的li能够并排
                让这个宽度随便取，大一点*/
                width:5000px;
                position:absolute;
                top:0;
                left:0;
            }
            .rolling ul{
                list-style: none;
            }
            .rolling ul li{
                float:left;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <div id="rolling" class="rolling">
            <div id="m_unit" class="m_unit">
                <ul>
                    <li><a href="#"><img src="image/0.png" alt="" /></a></li>
                    <li><a href="#"><img src="image/1.png" alt="" /></a></li>
                    <li><a href="#"><img src="image/pangzi.png" alt="" /></a></li>
                    <li><a href="#"><img src="image/pangzi.png" alt="" /></a></li>
                    <li><a href="#"><img src="image/4.png" alt="" /></a></li>
                </ul>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var rolling = document.getElementById("rolling");  //大盒子
        var m_unit = document.getElementById("m_unit");   //移动的盒子
        var lisUl = m_unit.getElementsByTagName("ul")[0];  //ul
        var imgs = lisUl.getElementsByTagName("img");   //图片的集合

        //图片原来数量
        var zhefandian;  //折返点

        //复制一倍的li
        lisUl.innerHTML+=lisUl.innerHTML;

        //得到所有的li 包括新li
        var lis = lisUl.getElementsByTagName("li");

        //所有li个数，包括新li
        var lisLength = lis.length;


        //现在我们要计算折返点 ，但是每个li的宽度都不一样，所以现在假火车的第一个元素的offsetLeft,这个元素的offsetLeft就是折返点
        //这个元素是lis[lisLength/2];还有个麻烦Chrome机理,如果要读取offsetLeft值必须保证所有图片加载完毕

        for(var i=0,count=0;i<imgs.length;i++){
            imgs[i].onload=function(){
                count++;
                if(count == imgs.length){
                    zhefandian = lis[lisLength/2].offsetLeft;
                    move();
                }

            }
        }







        //信号量
        var newLeft = 0;
        var num = -3;
        var timer;



        function move(){
            //设表先停
            clearInterval(timer);

            timer=setInterval(function(){
                newLeft+= num;

                if(newLeft < -zhefandian){
                    newLeft=0;
                }
                if(newLeft>0){
                    newLeft=-zhefandian;
                }
                m_unit.style.left = newLeft + 'px';

        },20);



        }
    </script>
</html>


<!-- 图片  一共5个
图片 进行了+= 之后一共 10个
长度10
0 1 2 3 4 5 6 7 8 9


10 / 2 = 5
imgs[5].offsetLeft   折返点 -->